import { CardWithTitle } from "@/components/public/card/card";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import Page from "@/components/public/page/page";
import { message } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
import styles from "./siteConfiguration.module.less";
import { $commonUploadImg } from "@/api/common/common";
import { getBase64ByFile } from "@/common/utils";
import { PlusOutlined, CloudUploadOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  setup() {
    const state = reactive({
      uploading: false,
      fileList: [],
      form: {
        name: '',//站点名称
        icon: '',
        licenseKey: '',//许可证号
        ICPFilingNumber:'',//ICP备案号
        describe:"",//描述
        title:'',//标题
        domainName:'',//域名
      },
      upload: (e: any) => {
        state.uploading = true;
        getBase64ByFile(e)
          .then((base64_img: any) => {
            $commonUploadImg({ base64_img })
              .then((res: any) => {
                state.form.icon = res.data?.url || "";
                state.uploading = false;
              })
              .catch(() => {
                state.uploading = false;
              });
          })
          .catch(() => {
            state.uploading = false;
          });
        return false;
      },
    })
    //确认
    const confirmHandler = () => {
      message.success("编辑成功");
    }
    return () => (
      <Page>
        <CardWithTitle title="站点配置">
          <LForm
            btns={["cancel", "confirm"]}
            v-model={state.form}
            onCancel={() => {
            }}
            onConfirm={() => {
              confirmHandler();
            }}
          >
            <LFormItem label="站点名" prop="">
              <a-input v-model:value={state.form.name}></a-input>
            </LFormItem>
            <LFormItem label="图标" prop="">
              {
                <div class={styles.right}>
                  <div class={styles.imageBox}>
                    {state.form.icon ? (
                      <img src={state.form.icon} />
                    ) : (
                      <div class={styles.imageContent}>
                        <PlusOutlined></PlusOutlined>
                        <div>Upload</div>
                      </div>
                    )}
                  </div>
                  <a-upload
                    v-model:file-list={state.fileList}
                    name="file"
                    showUploadList={false}
                    beforeUpload={state.upload}
                  >
                    <a-button loading={state.uploading}>
                      <CloudUploadOutlined></CloudUploadOutlined>
                      上传图片
                    </a-button>
                  </a-upload>
                </div>
              }
            </LFormItem>
            <LFormItem label="许可证号" prop="">
              <a-input v-model:value={state.form.licenseKey}></a-input>
            </LFormItem>
            <LFormItem label="ICP备案号" prop="">
              <a-input v-model:value={state.form.ICPFilingNumber}></a-input>
            </LFormItem>
            <LFormItem label="站点描述" prop="">
              <a-input v-model:value={state.form.describe}></a-input>
            </LFormItem>
            <LFormItem label="标题" prop="">
              <a-input v-model:value={state.form.title}></a-input>
            </LFormItem>
            <LFormItem label="域名" prop="">
              <a-input v-model:value={state.form.domainName}></a-input>
            </LFormItem>
          </LForm>
        </CardWithTitle>
      </Page>
    )
  }
})